<template>
  <headerSearch
    :query="query"
    @quryList="quryList"
    @search="search"
  ></headerSearch>
  <nut-list
    class="search_list"
    :height="178"
    :listData="showList"
    @scroll-bottom="handleScroll"
    v-if="showList.length>0"
  >
    <template v-slot="{ item, index }">
      <ListItem :item="item" class="item"  />
    </template>
  </nut-list>
  <view class="container_empty" v-else>
    <image mode="aspectFit" src="../../assets/images/index/empty3.png"></image>
    <view class="empty_text">暂无可改订单</view>
  </view>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";
import { OrderListType } from "../orderTracking/listType";
import { changeList } from "@/@api";
import ListItem from "./ListItem.vue";
import headerSearch from "@/pages/orderTracking/headerSearch";
import Taro,{ useDidShow } from "@tarojs/taro";
import useUserInfoStore from "../../store/user";

const userStore = useUserInfoStore();

const query = ref({
  keywords: "",
  wxStatus: '',
  start: "",
  end: "",
  flag: "",
});
const params = ref({
  pageNum: 1,
  pageSize: 10,
});
const loading = ref(false);
const formList = ref<OrderListType[]>([]);
const total = ref<number>(0)

function handleScroll() {

  if ((formList.value.length < total.value) && !loading.value) {
    loading.value = true;
    onLoadList()
  }
}
function quryList(item) {
  query.value.start = item.start;
  query.value.end = item.end;
  query.value.flag = item.flag;
  initList();
}
//搜索
function search(keywords: string) {
  console.log(keywords, "keywords");
  query.value.keywords = keywords;
  params.value = {
    pageNum: 1,
    pageSize: 10,
  };
  total.value = 0
  formList.value = []
  initList();
}
useDidShow(() => {
  total.value = 0
  formList.value = []
  initList()
});
// 筛选其他数据
const showList = computed(() => {
  return formList.value;
});
// 初始化列表
async function initList() {
  const res: any = await changeList(
    {
      wxStatus: query.value.wxStatus,
      startBillingTime: query.value.start,
      endBillingTime: query.value.end,
      flag: query.value.flag,
      keywords: query.value.keywords,
      batchAuthorization: false,
      batchPay: false,
    },
    params.value.pageNum,
    params.value.pageSize
  );

  if (res.data.code == 200) {
    formList.value = formList.value.concat(res.data.rows);
    loading.value = false
  }
}
// 懒加载
async function onLoadList() {
  loading.value = true;
  params.value.pageNum++;
  initList();
}
</script>
<style lang="scss">
page {
  overflow: hidden;
}
.search_list {
    height: calc(100vh - 120rpx) !important;
    overflow: auto;
    padding: 0 24rpx 24rpx;
    box-sizing: border-box;
    background-color: #efeff4;

    .item {
      width: 700rpx;
      height: 436rpx;
      background-color: #fff;
      margin-top: 24rpx;
      border-radius: 10rpx;
      // padding-top: 20rpx;
    }
  }
.container_empty {
  margin-top: 280rpx;
  text-align: center;

  image {
    width: 300rpx;
    height: 300rpx;
  }
  .empty_text {
    font-size: 32rpx;
    color: #999;
  }
}
</style>
